<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 :class="getClasses()">{{message}}</h2>
			<h2 :class="[styleClass1,styleClass2,styleClass3]">{{message}}</h2>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message: 'vueJs',
					styleClass1: 'active',
					styleClass2: 'demo-bankground-color',
					styleClass3: 'demo-font-size'
				},
				methods: {
					getClasses: function(){
						return[ this.styleClass1,this.styleClass2,this.styleClass3]
					}
				}
			})
		</script>
		<style type="text/css">
			.active {
				color: aqua;
			}
			.demo-bankground-color {
				background-color: rosybrown;
			}
			.demo-font-size{
				font-size: 50px;
			}
			
		</style>
	</body>
</html>
